<template>
	<div class="game-container report-container">
		<div class="view-container dealer-container">
			<div class="params">
				<el-form ref="form" :inline="true" :model="queryData">
					<el-form-item :label="`${$t('merchant.message_channel')}:`">
						<el-input
							v-model.trim="queryData.channelName"
							:disabled="loading"
							:placeholder="$t('common.please_enter')"
							clearable
							size="medium"
							style="width: 180px"
						></el-input>
					</el-form-item>
					<el-form-item>
						<el-button
							:disabled="loading"
							icon="el-icon-search"
							size="medium"
							type="primary"
							@click="search"
						>
							{{ $t('common.search') }}
						</el-button>
						<el-button
							:disabled="loading"
							icon="el-icon-refresh-left"
							size="medium"
							@click="reset"
						>
							{{ $t('common.reset') }}
						</el-button>
						<el-button
							v-if="hasPermission('905021')"
							:disabled="loading"
							icon="el-icon-plus"
							size="medium"
							type="success"
							@click="editAndAdd"
						>
							{{ $t('common.add') }}
						</el-button>
					</el-form-item>
				</el-form>
			</div>
			<div class="content">
				<el-table
					v-loading="loading"
					:data="tableData"
					:header-cell-style="getRowClass"
					border
					element-loading-spinner="el-icon-loading"
					style="width: 100%"
				>
					<el-table-column
						:label="$t('common.serial_number')"
						align="center"
						type="index"
						width="50"
					></el-table-column>
					<el-table-column
						:label="$t('merchant.message_channel')"
						:show-overflow-tooltip="true"
						align="center"
						prop="channelName"
					>
						<template slot-scope="scope">
							{{ scope.row.channelName || '-' }}
						</template>
					</el-table-column>
					<el-table-column
						:label="$t('merchant.code_num')"
						:show-overflow-tooltip="true"
						align="center"
						prop="channelCode"
					>
						<template slot-scope="scope">
							{{ scope.row.channelCode || '-' }}
						</template>
					</el-table-column>
					<el-table-column
						:label="$t('merchant.desc')"
						:show-overflow-tooltip="true"
						align="center"
						prop="remark"
					>
						<template slot-scope="scope">
							{{ scope.row.remark }}
						</template>
					</el-table-column>
					<el-table-column
						:label="$t('common.status')"
						align="center"
						prop="channelStatus"
					>
						<template slot-scope="scope">
							<el-tag
								:type="
									scope.row.channelStatus === 0
										? 'danger'
										: 'success'
								"
							>
								{{
									+scope.row.channelStatus === 0
										? $t('merchant.stop')
										: $t('merchant.open')
								}}
							</el-tag>
						</template>
					</el-table-column>
					<el-table-column
						:label="$t('merchant.creator')"
						:show-overflow-tooltip="true"
						align="center"
						prop="createdBy"
					>
						<template slot-scope="scope">
							{{ scope.row.createdBy || '-' }}
						</template>
					</el-table-column>
					<el-table-column
						:label="$t('merchant.create_time')"
						:show-overflow-tooltip="true"
						align="center"
						prop="createdAt"
						width="180"
					>
						<template slot-scope="scope">
							{{ scope.row.createdAt || '-' }}
						</template>
					</el-table-column>
					<el-table-column
						:label="$t('merchant.last_operate')"
						:show-overflow-tooltip="true"
						align="center"
						prop="updatedBy"
					>
						<template slot-scope="scope">
							{{ scope.row.updatedBy || '-' }}
						</template>
					</el-table-column>
					<el-table-column
						:label="$t('merchant.last_operate_time')"
						:show-overflow-tooltip="true"
						align="center"
						prop="updatedAt"
						width="180"
					>
						<template slot-scope="scope">
							{{ scope.row.updatedAt || '-' }}
						</template>
					</el-table-column>
					<el-table-column
						:label="$t('common.actions')"
						align="center"
						prop="operating"
						width="160"
					>
						<template slot-scope="scope">
							<el-button
								v-if="hasPermission('905022')"
								size="medium"
								type="primary"
								@click="edit(scope.row)"
							>
								{{ $t('common.edit') }}
							</el-button>
							<el-popconfirm
								:title="`${$t('merchant.is_modify_set')}?`"
								@confirm="turnOn(scope.row)"
							>
								<el-button
									v-if="hasPermission('905023')"
									slot="reference"
									:type="
										+scope.row.channelStatus === 0
											? 'success'
											: 'danger'
									"
								>
									{{
										+scope.row.channelStatus === 0
											? $t('merchant.open')
											: $t('merchant.stop')
									}}
								</el-button>
							</el-popconfirm>
						</template>
					</el-table-column>
				</el-table>
			</div>
			<el-dialog
				:destroy-on-close="true"
				:title="`${title}${$t('merchant.message_channel')}`"
				:visible.sync="dialogFormVisible"
				class="rempadding"
				:width="$i18n.locale === 'zh_CN' ? 480 : 580"
				@close="clear"
			>
				<el-form ref="formSub" :model="dialogForm">
					<el-form-item
						:label="`${$t('merchant.message_channel')}:`"
						:rules="[
							{
								required: true,
								message: $t('merchant.check_length_2'),
								trigger: 'blur'
							},
							{
								min: 2,
								max: 20,
								message: $t('merchant.check_length_2'),
								trigger: 'blur'
							}
						]"
						prop="channelName"
					>
						<el-input
							v-model.trim="dialogForm.channelName"
							:disabled="title !== $t('common.add')"
							:placeholder="$t('common.please_enter')"
							autocomplete="off"
							maxlength="20"
							show-word-limit
							style="width: 350px"
						></el-input>
					</el-form-item>
					<el-form-item
						:label="`${$t('merchant.code_num')}:`"
						:rules="[
							{
								required: true,
								message: $t('merchant.check_length_2'),
								trigger: 'blur'
							},
							{
								min: 2,
								max: 20,
								message: $t('merchant.check_length_2'),
								trigger: 'blur'
							}
						]"
						prop="channelCode"
					>
						<el-input
							v-model.trim="dialogForm.channelCode"
							:placeholder="$t('common.please_enter')"
							autocomplete="off"
							maxlength="20"
							show-word-limit
							style="width: 350px"
						></el-input>
					</el-form-item>
					<el-form-item
						:label="`${$t('common.status')}:`"
						:rules="[
							{
								required: true,
								message: $t('common.select_status'),
								trigger: 'change'
							}
						]"
						prop="channelStatus"
					>
						<el-select
							v-model="dialogForm.channelStatus"
							:placeholder="$t('common.please_choose')"
							autocomplete="off"
							style="width: 350px"
						>
							<el-option
								:label="$t('merchant.stop')"
								:value="0"
							></el-option>
							<el-option
								:label="$t('merchant.open')"
								:value="1"
							></el-option>
						</el-select>
					</el-form-item>
					<el-form-item
						:label="`${$t('merchant.desc')}:`"
						:rules="[
							{
								required: true,
								message: $t('merchant.check_length_2'),
								trigger: 'blur'
							},
							{
								min: 2,
								max: 20,
								message: $t('merchant.check_length_2'),
								trigger: 'blur'
							}
						]"
						prop="remark"
					>
						<el-input
							v-model="dialogForm.remark"
							:placeholder="$t('common.please_enter')"
							autocomplete="off"
							maxlength="20"
							show-word-limit
							style="width: 350px"
						></el-input>
					</el-form-item>
					<el-form-item
						:label="`${$t('merchant.remark_info')}:`"
						:rules="[
							{
								required: true,
								message: $t('merchant.check_length_2'),
								trigger: 'blur'
							},
							{
								min: 2,
								max: 500,
								message: $t('merchant.check_length_2'),
								trigger: 'blur'
							}
						]"
						prop="remark2"
						style="margin-top: 15px"
					>
						<el-input
							v-model="dialogForm.remark2"
							:placeholder="$t('common.please_enter')"
							maxlength="500"
							rows="8"
							show-word-limit
							type="textarea"
						></el-input>
					</el-form-item>
				</el-form>
				<div slot="footer" class="dialog-footer">
					<el-button
						:loading="btnLoading"
						@click="dialogFormVisible = false"
					>
						{{ $t('common.cancel') }}
					</el-button>
					<el-button
						type="primary"
						:loading="btnLoading"
						@click="subAddOrEdit"
					>
						{{ $t('common.sure') }}
					</el-button>
				</div>
			</el-dialog>
		</div>
	</div>
</template>

<script>
import list from '@/mixins/list'
// import { routerNames } from '@/utils/consts'
import {
	addSmsChannelgApi,
	querySmsChannelPageListApi,
	updateSmsChannelApi,
	updateSmsChannelStatusApi
} from '@/api/merchant/merchant-config/sms-channel'

export default {
	name: 'MessageChannelManage',
	mixins: [list],
	data() {
		this.search = this.throttle(this.search, 1000)
		this.reset = this.throttle(this.reset, 1000)
		return {
			queryData: {},
			tableData: [],
			dialogFormVisible: false,
			dialogForm: { channelStatus: undefined },
			title: '',
			btnLoading: false
		}
	},
	computed: {
		statusType() {
			return this.globalDics?.paymentChannelStatus || []
		}
	},
	methods: {
		async loadData() {
			try {
				this.loading = true
				const { data } = await querySmsChannelPageListApi({
					...this.queryData,
					pageNum: 1,
					pageSize: 1000
				})
				this.tableData = data?.record
				this.loading = false
			} catch (e) {
				this.loading = false
			}
		},
		editAndAdd(row) {
			this.$refs.formSub && this.$refs.formSub.clearValidate()
			if (row.id) {
				this.title = this.$t('common.edit')
				this.dialogFormVisible = true
			} else {
				this.title = this.$t('common.add')
				this.dialogForm = {}
				this.dialogFormVisible = true
			}
		},
		subAddOrEdit() {
			this.$refs.formSub.validate(async (v) => {
				if (v) {
					const params = {
						channelCode: this.dialogForm.channelCode,
						channelName: this.dialogForm.channelName,
						channelStatus: this.dialogForm.channelStatus,
						remark: this.dialogForm.remark,
						remark2: this.dialogForm.remark2
					}
					try {
						this.btnLoading = true
						this.title === this.$t('common.add')
							? await addSmsChannelgApi(params)
							: await updateSmsChannelApi({
									...params,
									id: this.dialogForm.id
							  })

						this.btnLoading = false
						this.$message({
							message: `${this.$t('common.action_success')}`,
							type: 'success'
						})
						this.clear()
						this.dialogFormVisible = false
						await this.loadData()
					} catch (e) {
						this.btnLoading = false
					}
				}
			})
		},
		clear() {
			this.$refs.formSub.resetFields()
			this.dialogForm = {}
		},
		reset() {
			this.queryData = {}
			this.loadData()
		},
		async turnOn(row) {
			try {
				this.loading = true
				const params = {
					channelStatus: row.channelStatus === 0 ? '1' : '0',
					id: row.id
				}
				await updateSmsChannelStatusApi(params)
				this.loading = false
				await this.loadData()
			} catch (e) {
				this.loading = false
			}
		},
		edit(val) {
			this.$refs.formSub && this.$refs.formSub.clearValidate()
			this.title = this.$t('common.edit')
			this.dialogForm = { ...val }
			this.dialogFormVisible = true
		}
	}
}
</script>

<style lang="scss" scoped>
::v-deep .el-dialog__header {
	color: #909399;
	font-weight: 700;
}

::v-deep .tagheight .el-tag {
	height: 24px;
	line-height: 24px;
	min-width: 60px;
}

::v-deep .rempadding .el-dialog__body {
	padding: 0;
	padding-bottom: 30px;

	.contentBox,
	form {
		padding: 0 20px;
	}
}

::v-deep .el-input-number__decrease,
::v-deep .el-input-number__increase {
	display: none;
}

::v-deep .el-input-number--medium .el-input__inner {
	padding: 0 15px;
	text-align: left;
}

.decoration {
	text-decoration: underline;
	cursor: pointer;
}

.fenye {
	text-align: center;
}
</style>
